<template>
<link href="/assets/css/indent-details.css" rel="stylesheet" type="text/css">
    <!-- 返回界面 -->
    <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

<!-- 引入界面 -->
<div class="near-box">
    <div class="jd-qrdd-bigbox">
        <!--商品地址管理部分-->
        <div class="indent-details-box">
            <span class="indent-details-img1"></span>
            <span class="indent-details-text1">{{info.order.status_text}}</span>
            <span class="indent-details-text2" v-if="info.order.expid" >
                快递公司:{{info.order.express.name}}
                <br/>
                快递单号:{{info.order.expcode}}
            </span>
            <span v-else class="indent-details-text2">
              暂无物流信息
            </span>
            <!-- <span class="indent-details-text3">{{info.order.createtime}}</span> -->
         
        </div>  

        <!--address 地址部分 有地址才输出-->
        <div class="jd-qrdd-a1" v-if="info.address">
            <span class="qrdd-a1-t1">{{info.address.consignee}}</span>
            <span class="qrdd-a1-t1">{{info.address.mobile}}</span>
            <span class="qrdd-a1-t2" v-if="info.address.status=='1'">默认</span>

            <div class="qrdd-a1-b1">
                <span class="qrdd-a1-img1"></span>
                <span class="qrdd-a1-t3">{{info.address.region_text}}+{{info.address.address}}</span>
            </div>
            <span class="qrdd-a1-img2"></span>
        </div>

        <!--商品部分-->
        <div class="zjzz-buylist-goods1" v-if="info.product.length > 0">
            <!-- 联系客服 -->
            <div class="zjzz-buylist-gtime">
                <span class="zjzz-buylist-gtime1"><i class="indent-details-img2"></i>保洁官方旗舰店</span>
                <span class="zjzz-buylist-gtime2" @click="Call">联系客服</span>
            </div>

            <!-- 循环info 里面的商品 -->
            <router-link :to="{path:'/product/product/info', query: {proid: product.proid}}"  class="zjzz-buylist-det" v-for="product in info.product">

                <img :src="product.info.cover_cdn"/>
                <div class="zjzz-buylist-gdetail">
                    <span class="zjzz-buylist-gtit1">{{product.info.name}}</span>
                    <span class="zjzz-buylist-gmoney">
                        <i class="zjzz-buylist-gm1">￥{{product.total}}</i>
                        <i class="zjzz-buylist-gm2">x{{product.nums}}</i>
                    </span>
                </div>
            </router-link>

            <div class="zjzz-buylist-btn">
                <a href="javascript:void(0)" class="zjzz-buylist-btn3" @click="Call">申请售后</a>
            </div>
        </div>

        <!--商品金额部分-->
        <div class="indent-details-box2">
            <span class="indent-details-text4 tcolor-grey">订单总额</span>
            <span class="indent-details-text5 tcolor-black">￥{{info.order.total}}</span>
        </div>
        <div class="indent-details-box2">
            <span class="indent-details-text4 tcolor-grey">订单编号</span>
            <span class="indent-details-text5 tcolor-black">{{info.order.code}}</span>
        </div>
        <div class="indent-details-box2">
            <span class="indent-details-text4 tcolor-grey">下单时间</span>
            <span class="indent-details-text5 tcolor-black">{{info.order.createtime}}</span>
        </div>
        <div class="indent-details-box2">
            <span class="indent-details-text4 tcolor-grey">订单备注</span>
            <span class="indent-details-text5 tcolor-black">{{info.order.content}}</span>
        </div>
    </div>
</div>
</template>
<script>
export default {
    name:'OrderInfo',

    created() {
        // 接收参数
        this.orderid=this.$route.query.orderid ? this.$route.query.orderid : 0

        this.OrderData()
    },
    data() {
        return {
            orderid:0,
            LoginUser:this.$cookies.get('LoginUser'),
            info:{
                order:{
                    express:{}
                },//为什么null报错
                address:null,//地址
                product:[],//info里面的商品
                contact:'',//电话号码
            },
           
          
        }
    },

    methods: {
        back()
        {
            this.$router.go(-1)
        },
        // 联系客服
        Call()
        {
            this.$dialog.confirm({
                title:'拨打电话',
                message:'是否确认拨打官方客服热线',
            }).then(()=>{
                location.href=`tel:${this.info.contact}`
                return
            }).catch(()=>{})
        },
        
        async OrderData()
        {
            // 组装数据
            var data={
                orderid:this.orderid,//订单id
                userid:this.LoginUser.id,//用户id
            }
            // console.log(data);
            // return false

            var result =await this.$api.OrderInfo(data)

            // console.log(result.data);
            // return false
            
            // 判断
            if(result.code==0)
            {
                // 提醒
                this.$notify({
                    type:'danger',
                    message:result.msg,
                    duration:1000,
                    onClose:()=>{
                        this.$router.go(-1)
                    }
                })
                return false
            }

            this.info=result.data
            console.log(this.info);
            
        }
    },
}
</script>


<style>
  .near-box{
    margin-top:4em;
  }

  .jd-qrdd-bigbox{
    padding-bottom:1em;
  }
</style>